import React from 'react';
import { Button } from 'antd';
import { VtxModal, VtxMap } from 'vtx-ui';
import styles from './ViewItem.less';
import { NAME_SPACE } from './config';

const Index = (props) => {

  const {
    dispatch,
    modelVisable,
    details,
  } = props 

  const closeModle = () => {
    dispatch({
      type: `${NAME_SPACE}/updateState`,
      payload: {
        modelVisable: false,
      }
    })
  }

  const modalProps = {
    visible: modelVisable,
    closable: () => {closeModle()},
    title: '警报详情',
    footer: [
      <Button onClick={() => {closeModle()}}>关闭</Button>
    ],
    width: 600,
  }

  return(
    <div>
      <VtxModal {...modalProps}>
        <div className={styles.normal}>
          <div className = {styles.item}>
            <div className = {styles.halfContent}>
              <div className = {styles.title}>车牌号：</div>
              <div className = {styles.content}></div>
            </div>
            <div className = {styles.halfContent}>
              <div className = {styles.title}>作业人员：</div>
              <div className = {styles.content}></div>
            </div>
          </div>
          <div className = {styles.item}>
            <div className = {styles.halfContent}>
              <div className = {styles.title}>报警时间：</div>
              <div className = {styles.content}></div>
            </div>
            <div className = {styles.halfContent}>
              <div className = {styles.title}>报警类型：</div>
              <div className = {styles.content}></div>
            </div>
          </div>
          <div className = {styles.item}>
            <div className = {styles.allContent}>
              <div className = {styles.title}>报警地点：</div>
              <div className = {styles.content}></div>
            </div>
          </div>
          <div className={styles.map}>
            <VtxMap
              mapType='bmap'
              mapId= '1'
              mapZoomLevel = {11}
              mapCenter={[116.40, 39.90]}
            />
          </div>
        </div>
      </VtxModal>
    </div>
  )
}
export default Index